<template>
  <div class="user-center-warp">
    <header class="header">
      <section class="show-bg"></section>
      <div class="header_item">
        <aside>
          <image @click="handleLink(link)" class="header_img" :src="img" />
          <h1 class="name">{{name}}</h1>
          <p>{{type}}</p>
        </aside>
      </div>
    </header>
    <!-- 导航 -->
    <div class="content">
      <div class="content_item" v-for="item in menu" :key="item.id" @click="handleLink(item.link)">
        <image class="content_img" :src="item.icon" />
        <p class="toRight">{{item.name}}</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: "刘妙春",
      type: "主任医师",
      img: "../../../../static/images/user3.png",
      link: "../my_info/main",

      menu: [
        {
          id: 0,
          name: "个人信息设置",
          link: "../my_doctor/main",
          icon: "../../../static/images/my.png"
        },
        {
          id: 1,
          name: "工作室二维码",
          link: "",
          icon: "../../../static/images/qr-code.png"
        },
        {
          id: 2,
          name: "公告管理",
          link: "",
          icon: "../../../static/images/gg.png"
        },
        {
          id: 3,
          name: "文章管理",
          link: "",
          icon: "../../../static/images/article.png"
        },
        {
          id: 4,
          name: "助理管理",
          link: "",
          icon: "../../../static/images/assistant.png"
        },
        {
          id: 5,
          name: "患者管理",
          link: "",
          icon: "../../../static/images/patient.png"
        },
        {
          id: 7,
          name: "消息设置",
          link: "",
          icon: "../../../static/images/mess.png"
        },
        {
          id: 8,
          name: "意见反馈",
          link: "",
          icon: "../../../static/images/feedback.png"
        }
      ]
    };
  },
  methods: {
    handleLink(url) {
      console.log(url);
      wx.navigateTo({ url });
    }
  },
  mounted() {
    console.log(1);
  }
};
</script>
<style  scoped>
.user-center-warp {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: #f9f9fb;
}
.header {
  height: 400rpx;
  position: relative;
}
.show-bg {
  width: 100%;
  height: 250rpx;
  background: linear-gradient(#366ae7, #5e60ea);
}
.header_item {
  width: 5000rpx;
  height: 5000rpx;
  background-color: #f9f9fb;
  border-radius: 2500rpx;
  position: absolute;
  left: -2120rpx;
  top: 200rpx;
}
.header_item aside {
  width: 250rpx;
  overflow: hidden;
  position: absolute;
  left: 50%;
  margin-left: -125rpx;
  text-align: center;
  top: -90rpx;
}
.header_item aside p {
  font-size: 28rpx;
  padding-top: 4rpx;
  color: #666666;
}
.header_img {
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%;
}
.name {
  padding-top: 4rpx;
  font-size: 42rpx;
  font-weight: bold;
}
.content {
  margin-top: 20rpx;
  background-color: #f9f9fb;
}
.content_item {
  position: relative;
  height: 100rpx;
  line-height: 100rpx;
  color: #2a2a2c;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-left: 30rpx;
}
.content_img {
  width: 42rpx;
  height: 42rpx;
}
.content_item p {
  width: 90%;
  height: 100rpx;
  line-height: 100rpx;
  margin-left: 20rpx;
  margin-right: 20rpx;
  font-size: 32rpx;
  border-bottom: 1rpx solid #dddddd;
}
</style>